<template>
  <div class="page-common-layout custom-tablePage-container">
    <div class="screen-conditions-container">
      <ScreenConditions :isDataType="false">
        <template slot="conditions">
          <a-input placeholder="请输入名称" v-model="condition.name"></a-input>
          <a-range-picker
            :placeholder="['开始日期', '结束日期']"
            format="YYYY-MM-DD"
            valueFormat="YYYY-MM-DD"
            v-model="condition.date"
            :show-time="false"
          />
          <a-input
            placeholder="请输入地点"
            v-model="condition.location"
          ></a-input>
          <a-select
            v-model="condition.major"
            placeholder="请选择专业"
            showSearch
            allowClear
            :filter-option="filterOption"
          >
            <a-select-option
              :value="item.dicItemCode"
              v-for="item in majorSource"
              :key="item.dicItemCode"
            >
              {{ item.dicItemName }}
            </a-select-option>
          </a-select>
        </template>
        <template slot="operate">
          <a-button class="cu-btn-primary" icon="search" @click="search()">
            查询
          </a-button>
          <a-button class="cu-btn-filter" icon="reload" @click="reset()">
            重置
          </a-button>
        </template>
      </ScreenConditions>
    </div>
    <div class="table-body-container">
      <div class="table-operate">
        <a-button
          @click="handleWrapPage({}, 1)"
          class="cu-btn-primary margin-bottom-xs"
          icon="plus"
          v-action="'tzhs_table_add'"
        >
          新增
        </a-button>
        <a-button
          @click="handleExport()"
          :loading="downloadLoading"
          v-action:tzhs_table_download
        >
          导出
        </a-button>
      </div>
      <div class="table-main">
        <vxe-table
          ref="xTable"
          height="99%"
          align="left"
          show-overflow
          show-header-overflow
          border="inner"
          :data="tableData"
          :column-config="{ resizable: true }"
          size="small"
          :loading="loading"
          :row-config="{ keyField: 'uuid' }"
          :expand-config="{
            reserve: true,
            visibleMethod: visibleMethod,
          }"
        >
          <vxe-column type="expand" width="26">
            <template #content="{ row }">
              <div class="expand-wrapper">
                <vxe-table
                  align="center"
                  border="inner"
                  :data="row.historys || []"
                  :column-config="{ resizable: true }"
                  show-overflow
                  show-header-overflow
                  size="small"
                >
                  <vxe-column field="versionNumber" title="版本号">
                  </vxe-column>
                  <vxe-column field="name" title="名称"> </vxe-column>
                  <vxe-column field="time" title="时间"> </vxe-column>
                  <vxe-column field="location" title="地点"> </vxe-column>
                  <!-- <vxe-column title="参会人员">
                    <template #default="{ row }">
                      <div class="files-icon">
                        <a-tooltip placement="top">
                          <template slot="title">
                            查看
                          </template>
                          <a-icon type="eye" />
                        </a-tooltip>
                      </div>
                    </template>
                  </vxe-column> -->
                  <vxe-column field="majorDesc" title="专业"> </vxe-column>
                  <vxe-column title="问题清单">
                    <template #default="{ row }">
                      <div class="files-icon">
                        <!-- 预览 -->
                        <a-tooltip placement="top">
                          <template slot="title">
                            预览
                          </template>
                          <a-icon type="eye" @click="previewProblem(row)" />
                        </a-tooltip>
                        <!-- 下载 -->
                        <a-tooltip placement="top">
                          <template slot="title">
                            下载
                          </template>
                          <a-icon
                            type="download"
                            @click="
                              downloadTable(row, {
                                name: '问题清单',
                                type: 'wtqd',
                              })
                            "
                          />
                        </a-tooltip>
                      </div>
                    </template>
                  </vxe-column>
                  <vxe-column title="处理意见表">
                    <template #default="{ row }">
                      <div class="files-icon">
                        <!-- 预览 -->
                        <a-tooltip placement="top">
                          <template slot="title">
                            预览
                          </template>
                          <a-icon type="eye" @click="previewOpinion(row)" />
                        </a-tooltip>
                        <!-- 下载 -->
                        <a-tooltip placement="top" v-action:tzhs_table_download>
                          <template slot="title">
                            下载
                          </template>
                          <a-icon
                            type="download"
                            @click="
                              downloadTable(row, {
                                name: '处理意见表',
                                type: 'clyj',
                              })
                            "
                          />
                        </a-tooltip>
                      </div>
                    </template>
                  </vxe-column>
                  <vxe-column field="reason" title="驳回原因"> </vxe-column>
                  <vxe-column
                    field="operate"
                    width="60"
                    title="操作"
                    fixed="right"
                  >
                    <template #default="{ row }">
                      <div class="text-button-group">
                        <!-- 查看 -->
                        <a-tooltip placement="top">
                          <template slot="title">
                            查看
                          </template>
                          <a-icon
                            type="file-search"
                            @click="handleDetailPage(row, 1)"
                          />
                        </a-tooltip>
                      </div>
                    </template>
                  </vxe-column>
                </vxe-table>
              </div>
            </template>
          </vxe-column>
          <vxe-table-column width="40">
            <template #header>
              <a-checkbox
                v-model="allChecked"
                :indeterminate="indeterminate"
                @change="allClick($event)"
              >
              </a-checkbox>
            </template>
            <template #default="{ row }">
              <a-checkbox
                v-model="row.select"
                @change="changeItem($event, row)"
              >
              </a-checkbox>
            </template>
          </vxe-table-column>
          <vxe-column type="seq" width="50" title="序号" align="center">
          </vxe-column>
          <vxe-column field="name" title="名称"> </vxe-column>
          <vxe-column field="time" title="时间"> </vxe-column>
          <vxe-column field="location" title="地点"> </vxe-column>
          <!-- <vxe-column title="参会人员">
            <template #default="{ row }">
              <div class="files-icon">
                <a-tooltip placement="top">
                  <template slot="title">
                    查看
                  </template>
                  <a-icon type="eye" />
                </a-tooltip>
              </div>
            </template>
          </vxe-column> -->
          <vxe-column field="majorDesc" title="专业"> </vxe-column>
          <vxe-column title="问题清单">
            <template #default="{ row }">
              <div class="files-icon">
                <!-- 预览 -->
                <a-tooltip placement="top">
                  <template slot="title">
                    预览
                  </template>
                  <a-icon type="eye" @click="previewProblem(row)" />
                </a-tooltip>
                <!-- 下载 -->
                <a-tooltip placement="top" v-action:tzhs_table_download>
                  <template slot="title">
                    下载
                  </template>
                  <a-icon
                    type="download"
                    @click="
                      downloadTable(row, {
                        name: '问题清单',
                        type: 'wtqd',
                      })
                    "
                  />
                </a-tooltip>
              </div>
            </template>
          </vxe-column>
          <vxe-column title="处理意见表">
            <template #default="{ row }">
              <div class="files-icon">
                <!-- 预览 -->
                <a-tooltip placement="top">
                  <template slot="title">
                    预览
                  </template>
                  <a-icon type="eye" @click="previewOpinion(row)" />
                </a-tooltip>
                <!-- 下载 -->
                <a-tooltip placement="top" v-action:tzhs_table_download>
                  <template slot="title">
                    下载
                  </template>
                  <a-icon
                    type="download"
                    @click="
                      downloadTable(row, {
                        name: '处理意见表',
                        type: 'clyj',
                      })
                    "
                  />
                </a-tooltip>
              </div>
            </template>
          </vxe-column>
          <!-- <vxe-column title="状态" width="100">
            <template #default="{ row }">
              <div class="state" :class="[filterStateClass(row.approveStatus)]">
                {{ filterStateName(row.approveStatus) }}
              </div>
            </template>
          </vxe-column> -->
          <vxe-column field="operate" width="180" title="操作" fixed="right">
            <template #default="{ row }">
              <div class="text-button-group">
                <!-- 查看 -->
                <a-tooltip placement="top">
                  <template slot="title">
                    查看
                  </template>
                  <a-icon
                    type="file-search"
                    @click="handleDetailPage(row, 1)"
                  />
                </a-tooltip>
                <!-- 批注 -->
                <a-tooltip
                  placement="top"
                  v-action="'tzhs_table_mark'"
                  v-if="row.mark"
                >
                  <template slot="title">
                    批注
                  </template>
                  <icon-fonts
                    icon="icon-a-444"
                    class="record"
                    @change="handleMark(row)"
                  ></icon-fonts>
                </a-tooltip>
                <!-- 问题处理 -->
                <a-tooltip placement="top" v-if="row.dealProblem">
                  <template slot="title">
                    问题处理
                  </template>
                  <icon-fonts
                    icon="icon-zhenggaicuoshi"
                    class="contrast"
                    @change="hanldleDealwith(row)"
                  ></icon-fonts>
                </a-tooltip>
                <!-- 审批记录 -->
                <a-tooltip placement="top" v-if="row.approveRecord">
                  <template slot="title">
                    审批记录
                  </template>
                  <icon-fonts
                    icon="icon-shenpi"
                    class="record"
                    @change="gotoApprovalRecord(row)"
                  ></icon-fonts>
                </a-tooltip>
                <!-- 提交 -->
                <a-tooltip
                  placement="top"
                  v-if="row.submit"
                  v-action="'tzhs_table_submit'"
                >
                  <template slot="title">
                    提交
                  </template>
                  <icon-fonts
                    icon="icon-fabu-tijiao-tijiaobanben"
                    class="submit"
                    @change="handleSubmit(row)"
                  ></icon-fonts>
                </a-tooltip>
                <!-- 审批 -->
                <a-tooltip placement="top" v-if="row.approve">
                  <template slot="title">
                    审批
                  </template>
                  <icon-fonts
                    icon="icon-shenpi1"
                    class="approve"
                    @change="handleDetailPage(row, 2)"
                  ></icon-fonts>
                </a-tooltip>
                <!-- 编辑 -->
                <a-tooltip v-action="'tzhs_table_edit'" v-if="row.edit">
                  <template slot="title">
                    编辑
                  </template>
                  <a-icon type="edit" @click="handleWrapPage(row, 2)" />
                </a-tooltip>
                <!-- 删除 -->
                <a-tooltip v-action="'tzhs_table_del'" v-if="row.del">
                  <template slot="title">
                    删除
                  </template>
                  <a-icon type="delete" @click="handleDelClick(row)" />
                </a-tooltip>
              </div>
            </template>
          </vxe-column>
        </vxe-table>
      </div>
      <div class="table-pager">
        <vxe-pager
          size="small"
          background
          :current-page.sync="pager.page"
          :page-size.sync="pager.pageSize"
          :total="pager.total"
          :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'Sizes']"
          :page-sizes="[20, 50, 100, 500]"
          @page-change="paginationChange"
        >
          <template #left>
            <div class="vxe-pager-left-tip-container">
              共<span>{{ pager.total }}</span
              >条
            </div>
          </template>
        </vxe-pager>
      </div>
    </div>
    <!-- 新增/编辑-->
    <wrapPage
      :key="wrapPage.key"
      :visible.sync="wrapPage.visible"
      :parameter="wrapPage.row"
      :pageOperate="wrapPage.operate"
    ></wrapPage>
    <!-- 详情/审批 -->
    <detailPage
      :key="detailPage.key"
      :visible.sync="detailPage.visible"
      :parameter="detailPage.row"
      :pageOperate="detailPage.operate"
    ></detailPage>
    <!-- 选择图纸/模型 -->
    <drawingModal
      :visible.sync="drawingModal.visible"
      :parameter="drawingModal.row"
      @submit="submitDrawing($event)"
    ></drawingModal>
    <!-- 审批记录 -->
    <comment-modal ref="commentModal"></comment-modal>
    <!-- 批注新增 -->
    <annotationsViewPage
      ref="annotationsViewPage"
      :key="annotationsViewPage.key"
      :visible.sync="annotationsViewPage.visible"
      @handleListPage="handleListPage($event)"
    ></annotationsViewPage>
    <!-- 批注列表 -->
    <annotationsListPage
      :key="annotationsListPage.key"
      :visible.sync="annotationsListPage.visible"
      :isButton="annotationsListPage.isButton"
      :isRefresh="annotationsListPage.isRefresh"
      @editorView="editorView($event)"
      @refreshThree="refreshThree($event)"
    ></annotationsListPage>
    <!-- 处理意见表 -->
    <opinionPage
      :key="opinionPage.key"
      :visible.sync="opinionPage.visible"
      :parameter="opinionPage.source"
    ></opinionPage>
    <!-- 提交弹窗 -->
    <submitModal
      :visible.sync="submitModal.visible"
      :parameter="submitModal.record"
    ></submitModal>
  </div>
</template>

<script>
// 图纸会审
import { axios } from "@/utils/request";
import { _getUUID, downLoadFileByArraybuffer } from "@/utils/util.js";
import { downLoadBatchFileByArraybuffer } from "@/utils/TopVUI";
import ScreenConditions from "@/components/extendCustom/ScreenConditions";
import wrapPage from "./wrapPage.vue";
//详情
import detailPage from "./detailPage.vue";
//选择图纸/模型
import drawingModal from "./drawingModal.vue";
//提交弹窗
import submitModal from "./submitModal.vue";
//审批记录
import commentModal from "@/pages/workflow/oaLeave/comment.vue";
//新增批注
import annotationsViewPage from "./bimVisual/annotationsViewPage.vue";
//批注列表
import annotationsListPage from "./bimVisual/annotationsListPage.vue";
//处理意见表
import opinionPage from "./bimVisual/opinionPage.vue";

import { getDicItemByCode } from "@/api/common.js";
import {
  pageDrawingReview,
  deleteDrawingReview,
  zipDesignBriefing,
  submitDrawingReview,
  downloadDrawingReview,
} from "@/api/design";
export default {
  components: {
    ScreenConditions,
    commentModal,
    wrapPage,
    detailPage,
    drawingModal,
    annotationsViewPage,
    annotationsListPage,
    opinionPage,
    submitModal,
  },
  provide() {
    return {
      drawingModel: () => this.currentDrawing,
    };
  },

  data() {
    return {
      //专业
      majorSource: [],
      //查询条件
      condition: {
        //名称
        name: "",
        //时间
        date: [],
        //地点
        location: "",
        //专业
        major: undefined,
      },
      //列表
      loading: false,
      tableData: [],
      pager: {
        page: 1,
        pageSize: 50,
        total: 0,
      },
      //1新增2编辑
      wrapPage: {
        visible: false,
        key: _getUUID(),
        row: {},
        operate: 1,
      },
      //1详情/2审批
      detailPage: {
        visible: false,
        key: _getUUID(),
        row: {},
        operate: 1,
      },
      //选择图纸
      drawingModal: {
        visible: false,
        row: {},
      },
      //选择的图纸
      currentDrawing: {},
      //批注新增
      annotationsViewPage: {
        visible: false,
        key: _getUUID(),
      },
      //批注列表
      annotationsListPage: {
        visible: false,
        key: _getUUID(),
        isButton: false,
        isRefresh: false,
      },
      //处理意见表
      opinionPage: {
        visible: false,
        key: _getUUID(),
        source: {},
      },
      //复选框
      allChecked: false,
      indeterminate: false,
      checkRowKeys: [],
      //导出
      downloadLoading: false,
      //提交弹窗
      submitModal: {
        visible: false,
        record: {},
      },
    };
  },
  computed: {
    menuName() {
      let { title } = this.$route.meta;
      return title;
    },
  },
  mounted() {
    Promise.all([this.getTypeData(), this.getTableData()]);
  },
  methods: {
    handleExport() {
      this.downloadLoading = true;
      axios
        .post(
          `/probusiness/drawingReview/downloadBatchData`,
          {
            uuids: this.checkRowKeys.toString(),
          },
          {
            headers: {
              "Content-Type": "application/json",
            },
            apiType: "file",
            responseType: "arraybuffer",
          }
        )
        .then((data) => {
          downLoadFileByArraybuffer(data, this.menuName);
          //   downLoadBatchFileByArraybuffer(data,this.menuName)
        })
        .catch()
        .finally((_) => {
          this.downloadLoading = false;
        });
    },

    //查询专业
    getTypeData() {
      return new Promise((resolve, reject) => {
        getDicItemByCode({ code: "major" })
          .then((res) => {
            let { data } = res;
            this.majorSource = data ?? [];
            resolve();
          })
          .catch((_) => {
            this.majorSource = [];
            reject();
          })
          .finally((_) => {});
      });
    },
    //模版下载
    downloadTable(row, { name, type }) {
      downloadDrawingReview({
        uuid: row.uuid,
        downType: type,
      })
        .then((res) => {
          downLoadFileByArraybuffer(res, name + ".xls");
        })
        .catch((_) => {});
    },

    //编辑批注
    editorView(row) {
      this.$refs["annotationsViewPage"].handleEditSave(row);
    },
    //刷新最新的三条批注
    refreshThree() {
      this.$refs?.["annotationsViewPage"]?.getThreeDataList();
    },

    //新增批注
    submitDrawing(row) {
      this.currentDrawing = row;
      this.annotationsViewPage.key = _getUUID();
      this.annotationsViewPage.visible = true;
    },

    //批注列表
    handleListPage() {
      this.annotationsListPage.key = _getUUID();
      this.annotationsListPage.isButton = false;
      this.annotationsListPage.isRefresh = true;
      this.annotationsListPage.visible = true;
    },

    //1新增/2编辑
    handleWrapPage(row, operate) {
      this.wrapPage.operate = operate;
      this.wrapPage.row = row;
      this.wrapPage.key = _getUUID();
      this.wrapPage.visible = true;
    },

    //1详情/2审批
    handleDetailPage(row, operate) {
      this.detailPage.operate = operate;
      this.detailPage.row = row;
      this.detailPage.key = _getUUID();
      this.detailPage.visible = true;
    },

    //选择模型
    handleMark(row) {
      this.drawingModal.row = row;
      this.drawingModal.visible = true;
    },

    //处理
    hanldleDealwith(row) {
      this.currentDrawing = row;
      this.annotationsListPage.key = _getUUID();
      this.annotationsListPage.isButton = true;
      this.annotationsListPage.isRefresh = false;
      this.annotationsListPage.visible = true;
    },

    //问题清单
    previewProblem(row) {
      this.currentDrawing = row;
      this.annotationsListPage.key = _getUUID();
      this.annotationsListPage.isButton = false;
      this.annotationsListPage.isRefresh = false;
      this.annotationsListPage.visible = true;
    },

    //处理意见表
    previewOpinion(row) {
      this.currentDrawing = row;
      this.opinionPage.key = _getUUID();
      this.opinionPage.source = row;
      this.opinionPage.visible = true;
    },

    //预览
    previewFile(files, name) {
      let fileList = [];
      if (name == "问题清单") {
        fileList = files.fileIdInfo ?? [];
      } else {
        fileList = JSON.parse(files ?? "[]");
      }
      if (fileList.length < 0) {
        return;
      }
      this.viewFileModal.name = name;
      this.viewFileModal.fileList = fileList ?? [];
      this.viewFileModal.visible = true;
    },

    //审批记录
    gotoApprovalRecord(record) {
      this.$refs.commentModal.getCommentList(record.uuid);
    },

    //下载
    downloadFile(files, name) {
      let fileList = [];
      let ids = [];
      if (name == "问题清单") {
        fileList = files.fileIdInfo;
        ids = fileList.map((v) => v.fileUuid);
      } else {
        fileList = JSON.parse(files ?? "[]");
        ids = fileList.map((v) => v.dfsFileUuid);
      }
      zipDesignBriefing({ fileIds: ids.toString() })
        .then((data) => {
          downLoadBatchFileByArraybuffer(data, name);
        })
        .catch((_) => {});
    },

    //删除
    handleDelClick(row) {
      let dataLength = this.tableData.length;
      let that = this;
      that.$confirm({
        title: "提示",
        content: "确定删除该数据吗？删除之后不可恢复！",
        okText: "确定",
        cancelText: "取消",
        icon: () =>
          that.$createElement("a-icon", {
            props: {
              key: "warning",
              type: "exclamation-circle",
              twoToneColor: "#faad14",
            },
          }),
        onOk() {
          deleteDrawingReview({ uuid: row.uuid })
            .then((res) => {
              if (res.statusCode === 200 || res === 1) {
                that.$message.success("删除成功", 1.5);
                if (dataLength == 1 && that.pager.page > 1) {
                  that.pager.page -= 1;
                }
                that.getTableData();
              } else {
                that.$message.error(res.message);
              }
            })
            .catch((_) => {});
        },
      });
    },

    //提交
    handleSubmit(row) {
      this.submitModal.record = row;
      this.submitModal.visible = true;
      return;
      let that = this;
      let { uuid } = row;
      const h = this.$createElement;
      this.$confirm({
        title: "您确定提交所选内容?",
        content: "",
        okText: "确定",
        okType: "primary",
        cancelText: "取消",
        centered: true,
        icon: () =>
          h("a-icon", {
            props: {
              type: "question-circle",
              theme: "filled",
            },
            style: "color:#FAAD14",
          }),
        onOk() {
          that.loading = true;
          submitDrawingReview({ uuid })
            .then((res) => {
              if (res.statusCode === 200 || res === 1) {
                that.$message.success("提交成功", 1.5);
                that.getTableData();
              } else {
                that.$message.error(res?.message ?? "提交失败");
              }
            })
            .catch((_) => {
              that.$message.error(_?.message ?? "提交失败");
            })
            .finally(() => {
              that.loading = false;
            });
        },
        onCancel() {},
      });
    },

    //查询
    search() {
      this.pager.page = 1;
      this.getTableData();
    },

    //重置
    reset() {
      this.condition = {
        //名称
        name: "",
        //时间
        date: [],
        //地点
        location: "",
        //专业
        major: undefined,
      };
      this.search();
    },
    visibleMethod({ row }) {
      if (row.historys && row.historys.length != 0) {
        return true;
      } else {
        return false;
      }
    },

    //查询列表数据
    getTableData() {
      this.loading = true;
      let { page, pageSize } = this.pager;
      let { major = "", name, date, location } = this.condition;

      return new Promise((resolve, reject) => {
        pageDrawingReview({
          page,
          pageSize,
          name,
          startTime: date?.[0] ?? "",
          endTime: date?.[1] ?? "",
          location,
          major,
        })
          .then((res) => {
            this.tableData = res.data?.rows || [];
            this.pager.total = res.data?.totalCount || 0;
            this.tableData.forEach((item) => {
              if (this.checkRowKeys.includes(item.uuid)) {
                this.$set(item, "select", true);
              } else {
                this.$set(item, "select", false);
              }
            });
            this.resetBatchCheckBox();
            resolve();
          })
          .catch((_) => {
            this.tableData = [];
            this.pager.total = 0;
            reject();
          })
          .finally((_) => {
            this.loading = false;
          });
      });
    },

    //重置全选按钮
    resetBatchCheckBox() {
      let filterArray = this.tableData;
      try {
        filterArray.forEach((v) => {
          if (v.select) {
            throw v;
          }
        });
        this.indeterminate = false;
      } catch (error) {
        this.indeterminate = true;
      }
      const ids = filterArray.filter((item) => item.select).map((v) => v.uuid);
      if (ids.length == filterArray.length) {
        this.indeterminate = false;
      }
      if (filterArray.length > 0) {
        this.allChecked = filterArray.every((v) => v.select);
      } else {
        this.allChecked = false;
      }
    },

    //全选
    allClick() {
      this.indeterminate = false;
      if (this.allChecked) {
        this.tableData.forEach((v) => {
          this.$set(v, "select", true);
        });
        this.checkRowKeys = this.tableData.map((v) => v.uuid);
      } else {
        this.tableData.forEach((v) => {
          this.$set(v, "select", false);
        });
        this.checkRowKeys = [];
      }
    },

    //单选
    changeItem(event, row) {
      let { checked } = event.target;
      let { uuid } = row;
      if (checked) {
        this.checkRowKeys.push(uuid);
        this.checkRowKeys = Array.from(new Set(this.checkRowKeys));
      } else {
        this.checkRowKeys = this.checkRowKeys.filter((v) => v != uuid);
      }
      let filterArray = this.tableData;
      this.allChecked = filterArray.every((v) => v.select);
      this.indeterminate =
        !!this.checkRowKeys.length &&
        this.checkRowKeys.length < filterArray.length;
    },

    //监听分页切换
    paginationChange({ currentPage, pageSize }) {
      this.pager.page = currentPage;
      this.pager.pageSize = pageSize;
      this.getTableData();
    },

    filterStateName(val) {
      switch (val) {
        case 0:
          return "待提交";
        case 1:
          return "审批中";
        case 2:
          return "审批通过";
        case 3:
          return "驳回";
        case 4:
          return "处理中";
        default:
          return "-";
      }
    },

    filterStateClass(val) {
      switch (val) {
        case 0:
          return "default";
        case 1:
          return "ing";
        case 2:
          return "lock";
        case 3:
          return "error";
        case 4:
          return "deal";
        default:
          return "";
      }
    },

    //select 搜索过滤
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      );
    },
  },
};
</script>

<style lang="scss" scoped>
.expand-wrapper {
  padding: 10px;
  box-sizing: border-box;
}

.state {
  &::before {
    position: relative;
    display: inline-block;
    content: "";
    width: 8px;
    height: 8px;
    background: #239b53;
    border-radius: 0px 0px 0px 0px;
    border-radius: 50%;
    margin-right: 10px;
  }
  &.default {
    &::before {
      background: #8c8c8c;
    }
  }
  &.ing {
    &::before {
      background: #f07f17;
    }
  }
  &.lock {
    &::before {
      background: #239b53;
    }
  }

  &.error {
    &::before {
      background: #ff3f4a;
    }
  }

  &.deal {
    &::before {
      background: #c652f0;
    }
  }
}
</style>
